<template>
  <div class="swiper">
	<swiper arrowDistance="60px" arrowMode="skip" :showNum="2" :pageShow="true" :arrowShow="true" :loop="true">
		<template #content>
			<a class="img" href="#" v-for="i in showData">
				<img :src="i.img" alt="">
			</a>
		</template>
	</swiper>
  </div>
</template>

<script>
	import swiper from 'components/swiper/swiper.vue'
  export default{
    name:'',
    data(){
      return {
				activeIndex:0
      }
    },
		computed:{
			showData(){
				return this.data[this.activeIndex]
			}
		},
    methods:{
      
    },
    components:{
      swiper
    },
	props:{
		data:{
			type:Array,
			default(){
				return []
			}
		}
	},
	mounted() {
		this.$bus.on("tabChange",res => {
			this.activeIndex=this.$store.state[res]
		});
	}
  }
</script>

<style scoped>
	.img{
		margin-right: 152px;
		/* margin-right: 70px; */
	}
	.img,.img img{
		width: 500px;
		/* width: 236px; */
		height: 236px;
	}
	.swiper{
		margin: 0 auto;
	}
	.swiper-button-prev, .swiper-button-next{
		display: block;
	}
	.test{
		display: inline-block;
		width: 15px;
		height: 15px;
		background-color: #00EAFF;
		font-size: 8px;
		line-height: 15px;
		margin-left: 10px;
		color: #ffffff;
		text-align: center;
	}
</style>
